<template>
  <div class="m-login-container">
    <el-tabs v-model="step">
      <el-tab-pane label="商品" name="product">
        <div class="m-main-content-body">
          <div class="inner">
            <el-form
              hide-required-asterisk
              :model="productData"
              :rules="rules"
              class="label-row"
              ref="productForm"
              label-width="90px"
            >
              <el-form-item prop="sn" label="对外编号">
                <el-input
                  clearable
                  size="small"
                  v-model="productData.sn"
                  placeholder="对外编号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="share_type" label="共享类型">
                <el-input
                  clearable
                  size="small"
                  v-model.number="productData.share_type"
                  placeholder="share_type"
                ></el-input>
              </el-form-item>
              <el-form-item prop="region_id" label="地区">
                <el-select
                  v-model="productData.region_id"
                  size="small"
                  filterable
                  reserve-keyword
                  placeholder="地区"
                >
                  <el-option
                    v-for="item in areaList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="fb_pixel_id" label="fb像素">
                <el-input
                  clearable
                  size="small"
                  v-model="productData.fb_pixel_id"
                  placeholder="fb像素"
                ></el-input>
              </el-form-item>
              <el-form-item prop="edr" label="预估签收率">
                <el-input
                  clearable
                  size="small"
                  v-model="productData.edr"
                  placeholder="预估签收率"
                ></el-input>
              </el-form-item>
              <el-form-item prop="e_cost_price" label="采购价格">
                <el-input
                  clearable
                  size="small"
                  v-model="productData.e_cost_price"
                  placeholder="采购价格"
                ></el-input>
              </el-form-item>
              <el-form-item prop="purchase_url" label="采购地址">
                <el-input
                  clearable
                  size="small"
                  v-model="productData.purchase_url"
                  placeholder="采购地址"
                ></el-input>
              </el-form-item>
              <el-form-item prop="status" label="状态">
                <el-input
                  clearable
                  size="small"
                  v-model.number="productData.status"
                  placeholder="状态"
                ></el-input>
              </el-form-item>
            </el-form>
             <span class="dialog-footer" v-if="step !== 'attr'">
      <!-- <el-button type="warning" @click="close()">取消</el-button> -->
      <el-button :loading="submitLoading" type="success" @click="submit()"
        >保存</el-button
      >
    </span>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="展示" name="display" :disabled="!product_id">
        <div class="m-main-content-body">
          <div class="inner">
            <el-form
              hide-required-asterisk
              :model="displayData"
              label-width="80px"
              :rules="rules"
              ref="displayForm"
              class="label-row"
            >
              <el-form-item prop="name" label="名称">
                <el-input
                  size="small"
                  v-model="displayData.name"
                  placeholder="名称"
                ></el-input>
              </el-form-item>
              <el-form-item prop="e_name" label="面单名称">
                <el-input
                  size="small"
                  v-model="displayData.e_name"
                  placeholder="面单名称"
                ></el-input>
              </el-form-item>
              <el-form-item prop="m_name" label="短信民称">
                <el-input
                  size="small"
                  v-model="displayData.m_name"
                  placeholder="短信民称"
                ></el-input>
              </el-form-item>
              <el-form-item prop="src_price" label="原价">
                <el-input
                  size="small"
                  v-model.number="displayData.src_price"
                  placeholder="原价"
                ></el-input>
              </el-form-item>
              <el-form-item prop="sale_price" label="现价">
                <el-input
                  size="small"
                  v-model.number="displayData.sale_price"
                  placeholder="现价"
                ></el-input>
              </el-form-item>
              <el-form-item prop="stock" label="库存">
                <el-input
                  size="small"
                  v-model.number="displayData.stock"
                  placeholder="库存"
                ></el-input>
              </el-form-item>
              <el-form-item prop="sale_num" label="已售数量">
                <el-input
                  size="small"
                  v-model.number="displayData.sale_num"
                  placeholder="已售数量"
                ></el-input>
              </el-form-item>
              <el-form-item prop="main_carousel" label="主轮播图">
                <div class="carousel-form-item">
                  <div class="carousel-conainer">
                    <template v-if="displayData.main_carousel">
                      <!-- <p
                    v-for="(item, index) in displayData.main_carousel.split(',')"
                    :key="index"
                  >
                  {{ item }}
                  </p> -->
                      <p
                        class="carousel-img-wrapper"
                        v-for="(item, index) in displayData.main_carousel.split(
                          ','
                        )"
                        :key="index"
                      >
                        <span class="mask"></span>
                        <i
                          class="el-icon-delete carousel-del-icon"
                          @click="delMainCarousel(index)"
                        ></i>
                        <img class="img-item" :src="item" alt="" />
                      </p>
                      <!-- <div
                  class="carousel-img-wrapper"
                    v-for="(item, index) in displayData.main_carousel.split(
                      ','
                    )"
                    :key="index"
                  >
                    <el-popover placement="right" width="400" trigger="hover">
                       <template #reference>
                        <img
                        :scr="item"
                      />
                     </template>
                      <img class="img-item" :scr="item" />
                    </el-popover>
                  </div> -->
                    </template>
                  </div>

                  <el-upload
                    action="#"
                    accept="image/*"
                    :show-file-list="false"
                    :http-request="uploadFile"
                  >
                    <el-button size="small" type="primary" class="upload-btn"
                      >点击上传</el-button
                    >
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item prop="content" label="内容">
                <!-- <el-input
              size="small"
              v-model="displayData.content"
              placeholder="内容"
            ></el-input> -->
                <el-collapse>
                  <el-collapse-item title="点击打开内容">
                    <editor
                      @setEditorValue="setEditorValue"
                      @fullScreen="dislogContentVisible = true"
                      :showFullScreen="true"
                      :info="displayData.content"
                    />
                  </el-collapse-item>
                </el-collapse>
              </el-form-item>
              <el-form-item prop="tags" label="标签">
                <el-input
                  size="small"
                  v-model="displayData.tags"
                  placeholder="标签"
                ></el-input>
              </el-form-item>
              <el-form-item prop="currency" label="货币符号">
                <el-input
                  size="small"
                  v-model="displayData.currency"
                  placeholder="货币符号"
                ></el-input>
              </el-form-item>
            </el-form>
             <span class="dialog-footer" v-if="step !== 'attr'">
      <!-- <el-button type="warning" @click="close()">取消</el-button> -->
      <el-button :loading="submitLoading" type="success" @click="submit()"
        >保存</el-button
      >
    </span>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="属性" name="attr" :disabled="!product_id">
        <el-tabs v-model="attrStep">
          <el-tab-pane label="选择图片" name="attrDisplay">
            <el-row class="m-main-header-search">
              <el-button
                @click="
                  handleOpareteClick(1, {
                    attr: 'display',
                  })
                "
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >
                新增
              </el-button>
            </el-row>
            <div class="m-main-content-body">
              <el-table
                ref="multipleTable"
                :data="attrDisplayData"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                :header-cell-style="{
                  'background-color': '#E5EEFF',
                }"
              >
                <el-table-column prop="key" label="名称"> </el-table-column>
                <el-table-column prop="value" label="内容"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button
                      class="table-operate-btn"
                      @click="
                        handleOpareteClick(2, {
                          attr: 'display',
                          ...scope.row,
                        })
                      "
                      type="text"
                      size="small"
                    >
                      编辑
                    </el-button>
                    <el-button
                      class="table-operate-btn red-btn-text"
                      @click="delAttr(scope.row.attri_id)"
                      type="text"
                      size="small"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <el-tab-pane label="属性配置" name="attrs">
            <el-row class="m-main-header-search">
              <el-button
                @click="
                  handleOpareteClick(1, {
                    attr: 'attr',
                  })
                "
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >
                新增
              </el-button>
            </el-row>
            <div class="m-main-content-body">
              <el-table
                ref="multipleTable"
                :data="attrData"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                :header-cell-style="{
                  'background-color': '#E5EEFF',
                }"
              >
                <el-table-column prop="key" label="名称"> </el-table-column>
                <el-table-column prop="value" label="内容"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button
                      class="table-operate-btn"
                      @click="
                        handleOpareteClick(2, {
                          attr: 'attr',
                          ...scope.row,
                        })
                      "
                      type="text"
                      size="small"
                    >
                      编辑
                    </el-button>
                    <el-button
                      class="table-operate-btn red-btn-text"
                      @click="delAttr(scope.row.attri_id)"
                      type="text"
                      size="small"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

    <dialog-set
      v-if="dislogSetVisible"
      @close="dislogSetVisible = false"
      :info="tempInfo"
      :product_id="product_id"
      @getList="getAttr"
    ></dialog-set>
    <dialog-content
      v-if="dislogContentVisible"
      @close="dislogContentVisible = false"
      :info="displayData.content"
      @confirm="fullConentConfirm"
    ></dialog-content>
  </div>
</template>

<script>
import DialogSet from "./components/DialogSet";
import Editor from "./components/Editor";
import DialogContent from "./components/DialogContent";
import { getSn } from "@/utils/index";
export default {
  components: {
    DialogSet,
    Editor,
    DialogContent,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    product_id() {
      return this.$route.query.product_id;
    },
  },
  data() {
    return {
      step: "product",
      attrStep: "attrDisplay",
      rules: {},
      newId: "",
      productData: {
        sn: "",
        // 产品
      },
      displayData: {
        // 展示
      },
      attrData: [
        // 属性
      ],
      attrDisplayData: [
        // 属性
      ],
      dislogSetVisible: false,
      tempInfo: {},
      fileList: [],
      areaList: [],
      submitLoading: false,
      dislogContentVisible: false,
      contentInfo: "",
    };
  },
  mounted() {
    this.getArea();
    if (this.product_id) {
      this.getProduct();
      this.getDisplay();
      this.getAttr();
    } else {
      this.productData.sn = getSn();
    }
  },
  methods: {
    /*
     * @Desc: 获取product
     */
    async getProduct() {
      this.loading = true;
      const { data } = await this.$api.product.getProduct({
        product_id: this.product_id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        this.productData = info;
      }
      this.loading = false;
    },

    /*
     * @Desc: 获取display
     */
    async getDisplay() {
      const { data } = await this.$api.product.getDisplay({
        product_id: this.product_id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        this.displayData = info || {};
      }
    },

    /*
     * @Desc: 获取 attr
     */
    async getAttr() {
      const { data } = await this.$api.product.getAttr({
        product_id: this.product_id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        this.attrData = info.attris;
        this.attrDisplayData = info.displays;
      }
    },

    /*
     * @Desc: 获取 地区列表
     */
    async getArea() {
      const { data } = await this.$api.product.getArea();
      const { code, data: info } = data;
      if (code === 200) {
        this.areaList = info;
      }
    },

    /*
     * @Desc: 编辑/新增 attr
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteClick(type, row = {}) {
      let seq = -1;
      if (type === 1) {
        seq = this[
          row.attr === "display" ? "attrDisplayData" : "attrData"
        ].reduce((pre, item) => {
          return item.seq > pre ? item.seq : pre;
        }, -1);
      }
      seq += 1;
      this.tempInfo = {
        seq,
        modalType: type,
        ...row,
      };
      this.dislogSetVisible = true;
    },

    getSubmitConfig(type = "api") {
      const apiMap = {
        product: {
          add: "productAdd",
          update: "productUpdate",
        },
        display: {
          add: "displayAdd",
          update: "displayUpdate",
        },
      };
      const callBack = (product_id) => {
        if (product_id) {
          this.$router.push({
            query: {
              ...this.$route.query,
              product_id,
            },
          });
        }
        if (this.step === "product") {
          this.getProduct();
        } else if (this.step === "display") {
          this.getDisplay();
        }
      };
      if (type === "api") {
        if (this.step === "display") {
          return apiMap[this.step][!this.displayData.id ? "add" : "update"];
        }
        return apiMap[this.step][!this.product_id ? "add" : "update"];
      } else if (type === "call") {
        return callBack;
      }
    },

    /**
     * @Desc 数据提交
     * */
    async submit() {
      const ref = this.step + "Form";
      this.$refs[ref].validate(async (valid) => {
        if (!valid) return;
        this.submitLoading = true;
        const formData = this[this.step + "Data"];
        const params = {
          product_id: +this.product_id,
          ...formData,
          display_id: +this.product_id,
        };
        const { data } = await this.$api.product[this.getSubmitConfig("api")](
          params
        );
        this.__globalHandleResponseMixin(data, () => {
          this.getSubmitConfig("call")(
            this.step === "product" ? data.data.product_id : ""
          );
          this.$message.success("保存成功");
        });
        this.submitLoading = false;
      });
    },
    /*
     * @Desc: 上传
     * @params: {String}
     * @return: {Object}
     */
    async uploadFile(fileInfo) {
      console.log(fileInfo);
      const { data } = await this.$api.product.upload(fileInfo.file);

      if (data.code === 200) {
        const main_carousel = this.displayData.main_carousel;
        if (this.displayData.main_carousel) {
        }
        const temp = main_carousel ? this.displayData.main_carousel + "," : "";
        this.displayData.main_carousel = temp + data.data[0];
        this.$forceUpdate();
      }
    },

    /*
     * @Desc: 附文本内容
     * @params: {String}
     * @return: {Object}
     */
    setEditorValue(val) {
      this.displayData.content = val;
    },

    /*
     * @Desc: 删除
     * @params: {String}
     * @return: {Object}
     */
    async delAttr(attri_id) {
      this.$delConfirm(null, null, async () => {
        const { data } = await this.$api.product.delAttr({
          attri_id,
        });
        const { code } = data;
        if (code === 200) {
          this.$message.success("删除成功");
          this.getAttr();
        }
      });
    },

    /*
     * @Desc: 主轮播图删除
     * @params: {String}
     * @return: {Object}
     */
    delMainCarousel(index) {
      let tempArr = this.displayData.main_carousel.split(",");
      tempArr.splice(index, 1);
      this.displayData.main_carousel = tempArr.join(",");
    },

    /*
     * @Desc: 全屏富文本保存
     * @params: {String}
     * @return: {Object}
     */
    fullConentConfirm(val) {
      this.displayData.content = val;
      this.dislogContentVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.m-main-content-body {
  .inner {
    width: 420px;
    margin: 0 auto;
  }
}
// /deep/.el-form-item {
//   margin-bottom: 2px;
//   display: flex;
//   .el-form-item__content {
//     flex: 1;
//     display: inline-flex;
//     margin-left: 6px !important;
//   }
//   .el-input,
//   .el-select,
//   .el-collapse {
//     width: 75%;
//   }
// }
.carousel-form-item {
  display: flex;

  .carousel-conainer {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .carousel-img-wrapper {
      position: relative;
      margin-right: 8px;
      margin-bottom: 8px;
      width: 84px;
      height: 110px;
      border: 1px solid #e3e3e3;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      padding: 1px;
      overflow: hidden;
      &:hover {
        .carousel-del-icon,
        .mask {
          display: block;
        }
      }
      .mask {
        position: absolute;
        width: 84px;
        height: 110px;
        background: rgba(0, 0, 0, 0.5);
        left: 0;
        top: 0;
        border-radius: 4px;
        z-index: 2;
        display: none;
      }
      .carousel-del-icon {
        cursor: pointer;
        position: absolute;
        right: 4px;
        top: 4px;
        font-size: 10px;
        background: rgba(144, 144, 144, 0.6);
        border-radius: 50%;
        color: #ffffff;
        padding: 4px;
        display: none;
        z-index: 2;
      }
    }
    .img-item {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
}
/deep/ .el-collapse-item__header{
    padding-left: 24px;
  }

  .dialog-footer{
    display: block;
    overflow: hidden;
    margin-top: 24px;
    .el-button{
      float: right;
    }
  }
</style>
